<template>
  <div>
    <goga-header title="我的订单">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <img v-if="firstLoading" class="gxb-loading" src="../../assets/loding.gif" alt="">
    <div class="order-list-wrapper">
      <div class="empty" v-if="isLogin&&!firstLoading&&getList.data.length ==0 ">
        <span>目前没有订单</span>
      </div>
      <ul class="order-list">
        <li v-for="(item,index) in getList.data">
          <order-item :order="item"></order-item>
        </li>
      </ul>
      <div v-if="getList.pageNum>getList.page">
        <div class="list-loading"v-if="loading" >
          <img src="/public/images/loading-min.gif" alt="">
        </div>
        <div class="list-loadmore" >
          <button class="loadmore-btn" @click="loadMore">
            加载更多消息
          </button>
        </div>
      </div>
      <div class="list-complete" v-if="getList.data.length != 0 && getList.pageNum!=0 && (getList.pageNum<=getList.page)">
        <img src="../../assets/min-logo.png" alt="">
      </div>
    </div>
    <div class="login-view" v-if="!firstLoading&&!isLogin">
      <p><router-link to="login">登录</router-link>&nbsp&nbsp|&nbsp&nbsp<router-link to="register">注册</router-link></p>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>
<script lang="babel">
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import orderItem from './orderItem.vue'
  import Icon from '@components/icon'
  import footerNav from '@components/footer-nav'
  import {mapGetters} from 'vuex'

  const fetchOrderList = async function (store, page) {
    store.dispatch('backend/order/getList', page)
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      footerNav,
      orderItem
    },
    data () {
      return {
        firstLoading: true,
        loading: false
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getList: 'backend/order/getList'
      })
    },
    async mounted() {
      await fetchOrderList(this.$store, 1);
      this.firstLoading = false
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      loadMore() {
        let page = this.getList.page + 1;
        if(page <= this.getList.pageNum) {
          this.loading = true;
          fetchOrderList(this.$store, page);
          this.loading = false;
        }
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>
